<template>
	<div
		class="wallet-input-amount h-[60px] px-1 flex justify-between items-center bg-bg-2 border-b duration-200"
		:class="focus ? 'text-t-1 border-primary' : 'text-primary border-border-2'">
		<base-currency :class="focus ? 'text-t-1' : 'text-primary'" class="text-[40px]" />
		<input
			ref="inputRef"
			type="text"
			:value="modelValue"
			class="w-full flex-1 bg-transparent outline-none border-none duration-200 pl-2 text-[40px]"
			:class="focus ? 'text-t-1' : 'text-primary'" />

		<base-button
			v-if="!hideMax"
			class="!text-primary !w-fit !hover:bg-transparent !bg-transparent pt-4"
			style="
				--n-border-hover: none;
				--n-border-pressed: none;
				--n-border-focus: none;
				--n-ripple-color: none;
				--n-border: none;
			"
			@click.stop="onClickMax">
			{{ $t('BalanceStatus.all') }}
		</base-button>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { BaseCurrency, BaseButton } from '@/components/base'
import { useAmountInput } from '@/hooks'
import { useWalletStore } from '@/store'
import { fmtAmount } from '@/utils'

defineProps({
	modelValue: {
		type: [String, Number]
	},
	min: {
		type: [String, Number],
		default: ''
	},
	max: {
		type: [String, Number],
		default: ''
	},
	hideMax: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['change', 'update:modelValue'])
const walletStore = useWalletStore()

const inputRef = ref<HTMLInputElement | null>(null)

const { amount, focus } = useAmountInput(inputRef)

const onClickMax = () => {
	amount.value = fmtAmount(Number(walletStore.balance), { hideCurrenySymbol: true })
	inputRef.value?.focus()
}

watch(
	() => amount.value,
	() => {
		const value = Number(String(amount.value).replace(/\,/g, ''))
		emits('change', value)
		emits('update:modelValue', value)
	}
)
watch(
	() => focus.value,
	() => {
		const value = Number(String(amount.value).replace(/\,/g, ''))
		emits('change', value)
		emits('update:modelValue', value)
	}
)
</script>

<style lang="scss" scoped>
.n-button:not(.n-button--disabled):hover {
	background-color: transparent;
}
.wallet-input-amount .app-bg-react:hover {
	background-image: unset;
}
</style>
